* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* vh，是指CSS中相对长度单位，
    表示相对视口高度（Viewport Height），
    1vh = 1% * 视口高度。 */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    transform: translate(150px, 100px) rotateX(-30deg) rotateY(30deg);
}

img {
    width: 600px;
    height: 600px;
}

.container1 {
    width: 600px;
    height: 600px;
    position: relative;
    /* 3D样式 */
    transform-style: preserve-3d;
    /* 周期为10S，linear表示以恒定速度，
    alternate表示动画交替反向运行，
    infinite表示无限循环播放动画 */
    animation: rotate 10s linear alternate infinite;
}

.container1 .item {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container1 .front1 {
    transform: translateZ(300px);
}

.container1 .back1 {
    transform: translateZ(-300px);
}

.container1 .left1 {
    transform: rotateY(90deg) translateZ(-300px);
}

.container1 .right1 {
    transform: rotateY(90deg) translateZ(300px);
}

.container1 .top1 {
    transform: rotateX(90deg) translateZ(300px);
}

.container1 .bottom1 {
    transform: rotateX(90deg) translateZ(-300px);
}


/* 立方体旋转顺序：右后左上前下*/

@keyframes rotate {
    0%,
    5% {
        transform: rotateY(-90deg);
    }
    19%,
    24% {
        transform: rotateY(-180deg);
    }
    38%,
    43% {
        transform: rotateY(-270deg);
    }
    57%,
    62% {
        transform: rotateX(-90deg);
    }
    76%,
    81% {
        transform: rotateX(0);
    }
    95%,
    100% {
        transform: rotateX(90deg);
    }
}